<template>
  <div class="mark-line">
    <div
      v-for="line in lines"
      v-show="lineStatus[line] || false"
      :key="line"
      :ref="line"
      class="line"
      :class="line.includes('x') ? 'xline' : 'yline'"
    ></div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, onMounted, ref } from "vue";
import eventBus from "@/utils/eventBus";

const lines = ref(["xt", "xc", "xb", "yl", "yc", "yr"]);
const lineStatus = ref({
  xt: false,
  xc: false,
  xb: false,
  yl: false,
  yc: false,
  yr: false,
});
const diff = 3;

onMounted(() => {
  eventBus.on("move", () => {
    showLine();
  });
  eventBus.on("unmove", () => {
    hideLine();
  });
});

const showLine = () => {};
const hideLine = () => {};
</script>

<style lang="scss" scoped>
.mark-line {
  height: 100%;
}

.line {
  background: #59c7f9;
  position: absolute;
  z-index: 1000;
}

.xline {
  width: 100%;
  height: 1px;
}

.yline {
  width: 1px;
  height: 100%;
}
</style>
